extends layout/main-layout

block active-item
  - menu['Dashboard']['active'] = 1
  - menu['Dashboard']['S']['Default']['active'] = 1

block content
  
  button(type='button').btn.btn-labeled.btn-primary.pull-right
    span.btn-label
      i.fa.fa-plus-circle
    | Add Item
  h3 
    | Dashboard
    br
    small Welcome user

  .hidden-xs(data-toggle="notify", data-onload, data-message="<b>New Updates Available!</b> Don't forget to check them!" data-options='{"status":"danger", "pos":"top-right"}')

  .row

    // START dashboard main content
    .col-md-9
      // START summary widgets
      .row
        .col-lg-3.col-sm-6
          // START widget
          .panel.widget(data-toggle="play-animation", data-play="fadeInDown", data-offset="0", data-delay="100")
            .panel-body.bg-primary
              .row.row-table.row-flush
                .col-xs-8
                  p.mb0 New visitors
                  h3.m0 1.5k
                .col-xs-4.text-center
                  em.fa.fa-user.fa-2x
                    sup.fa.fa-plus
            .panel-body
              // Bar chart
              .text-center
                .inlinesparkline.inline(data-bar-color="primary", data-height="30", data-bar-width="6", data-bar-spacing="6") 
                  | 5,3,4,6,5,9,4,4,10,5,9,6,4
        .col-lg-3.col-sm-6
          // START widget
          .panel.widget(data-toggle="play-animation", data-play="fadeInDown", data-offset="0", data-delay="500")
            .panel-body.bg-warning
              .row.row-table.row-flush
                .col-xs-8
                  p.mb0 Bounce Rate
                  h3.m0 50%
                .col-xs-4.text-center
                  em.fa.fa-users.fa-2x
            .panel-body
              // Bar chart
              .text-center
                .inlinesparkline.inline(data-bar-color="warning", data-height="30", data-bar-width="6", data-bar-spacing="6") 
                  | 10,30,40,70,50,90,70,50,90,40,40,60,40
        .col-lg-3.col-sm-6
          // START widget
          .panel.widget(data-toggle="play-animation", data-play="fadeInDown", data-offset="0", data-delay="1000")
            .panel-body.bg-danger
              .row.row-table.row-flush
                .col-xs-8
                  p.mb0 Searchs
                  h3.m0 28%
                .col-xs-4.text-center
                  em.fa.fa-search.fa-2x
            .panel-body
              // Bar chart
              .text-center
                .inlinesparkline.inline(data-bar-color="danger", data-height="30", data-bar-width="6", data-bar-spacing="6") 
                  | 2,7,5,9,4,2,7,5,7,5,9,6,4
        .col-lg-3.col-sm-6
          // START widget
          .panel.widget(data-toggle="play-animation", data-play="fadeInDown", data-offset="0", data-delay="1500")
            .panel-body.bg-success
              .row.row-table.row-flush
                .col-xs-8
                  p.mb0 Traffic
                  h3.m0 140.5 kb
                .col-xs-4.text-center
                  em.fa.fa-globe.fa-2x
            .panel-body
              // Bar chart
              .text-center
                .inlinesparkline.inline(data-bar-color="success", data-height="30", data-bar-width="6", data-bar-spacing="6") 
                  | 4,7,5,9,6,4,8,6,3,4,7,5,9
      // END summary widgets
      
      // START chart
      .row
        .col-lg-12
          .panel.panel-default
            .panel-collapse
              .panel-body
                .chart-area.flot-chart(style='height: 350px;', data-source="server/chart-data.php?type=area")
      // END chart
      
      // START Secondary Widgets
      .row
        .col-md-4
          // START widget
          .panel.widget(data-toggle="play-animation", data-play="fadeInLeft", data-offset="0", data-delay="1400")
            .panel-body
              .text-right.text-muted
                em.fa.fa-users.fa-2x
              h3.mt0 20 
              p.text-muted New followers added this month
              .progress.progress-striped.progress-xs
                  .progress-bar.progress-bar-success(role='progressbar', aria-valuenow='80', aria-valuemin='0', aria-valuemax='100', style='width: 80%;')
                    span.sr-only 80% Complete
          // END widget
        .col-md-4
          // START widget
          .panel.widget(data-toggle="play-animation", data-play="fadeInLeft", data-offset="0", data-delay="1400")
            .panel-body
              .text-right.text-muted
                em.fa.fa-bar-chart-o.fa-2x
              h3.mt0 $ 1250
              p.text-muted Average Monthly Income
              .progress.progress-striped.progress-xs
                  .progress-bar.progress-bar-info(role='progressbar', aria-valuenow='40', aria-valuemin='0', aria-valuemax='100', style='width: 40%;')
                    span.sr-only 40% Complete
          // END widget
        .col-md-4
          // START widget
          .panel.widget(data-toggle="play-animation", data-play="fadeInLeft", data-offset="0", data-delay="1400")
            .panel-body
              .text-right.text-muted
                em.fa.fa-trophy.fa-2x
              h3.mt0 $ 13865
              p.text-muted Yearly Income Goal
              .progress.progress-striped.progress-xs
                  .progress-bar.progress-bar-warning(role='progressbar', aria-valuenow='60', aria-valuemin='0', aria-valuemax='100', style='width: 60%;')
                    span.sr-only 60% Complete
          // END widget

      // END Secondary Widgets


      // START table
      .row
        .col-lg-12
          // START panel
          .panel.panel-default
            .panel-heading
              | Pending tasks
              a(href="#", data-perform="panel-dismiss", data-toggle="tooltip", title="Close Panel").pull-right
                em.fa.fa-times
              a(href="#", data-perform="panel-collapse", data-toggle="tooltip", title="Collapse Panel").pull-right
                em.fa.fa-minus
            // START table-responsive
            .table-responsive
              table.table.table-striped.table-bordered.table-hover
                thead
                  tr
                    th Task name
                    th Progress
                    th Deadline
                    th Action
                tbody
                  tr
                    td Nunc luctus, quam non condimentum ornare
                    td 
                      .progress.progress-striped.progress-xs
                          .progress-bar.progress-bar-success(role='progressbar', aria-valuenow='80', aria-valuemin='0', aria-valuemax='100', style='width: 80%;')
                            span.sr-only 80% Complete
                    td 
                      em.fa.fa-calendar.fa-fw.text-muted
                      |  05/05/2014
                    td.text-center
                      .btn-group
                          a.dropdown-toggle(href='#', data-toggle='dropdown')
                            i.fa.fa-cog
                          ul.dropdown-menu.pull-right.text-left
                            li
                              a(href='#') Action
                            li
                              a(href='#') Another action
                            li
                              a(href='#') Something else here
                            li.divider
                            li
                              a(href='#') Separated link
                  tr
                    td Integer in convallis felis.
                    td 
                      .progress.progress-striped.progress-xs
                          .progress-bar.progress-bar-danger(role='progressbar', aria-valuenow='20', aria-valuemin='0', aria-valuemax='100', style='width: 20%;')
                            span.sr-only 20% Complete
                    td 
                      em.fa.fa-calendar.fa-fw.text-muted
                      |  15/05/2014
                    td.text-center
                      .btn-group
                          a.dropdown-toggle(href='#', data-toggle='dropdown')
                            i.fa.fa-cog
                          ul.dropdown-menu.pull-right.text-left
                            li
                              a(href='#') Action
                            li
                              a(href='#') Another action
                            li
                              a(href='#') Something else here
                            li.divider
                            li
                              a(href='#') Separated link
                  tr
                    td Nullam sit amet magna vestibulum libero dapibus iaculis. 
                    td 
                      .progress.progress-striped.progress-xs
                          .progress-bar.progress-bar-info(role='progressbar', aria-valuenow='50', aria-valuemin='0', aria-valuemax='100', style='width: 50%;')
                            span.sr-only 50% Complete
                    td 
                      em.fa.fa-calendar.fa-fw.text-muted
                      |  05/10/2014
                    td.text-center
                      .btn-group
                          a.dropdown-toggle(href='#', data-toggle='dropdown')
                            i.fa.fa-cog
                          ul.dropdown-menu.pull-right.text-left
                            li
                              a(href='#') Action
                            li
                              a(href='#') Another action
                            li
                              a(href='#') Something else here
                            li.divider
                            li
                              a(href='#') Separated link
            // END table-responsive
            .panel-footer.text-right
              a(href="#"): small View all
          // END panel
      // END table
    // END dashboard main content

    // START dashboard sidebar
    .col-md-3
      // START messages
      .panel.panel-default
        .panel-heading
          .pull-right.label.label-info 33
          .panel-title Unread Messages
        // START list group
        .list-group
          // START list group item
          a.list-group-item(href='#')
            .media
              .pull-left
                img.media-object.img-rounded(style='width: 48px; height: 48px;', src="app/img/user/01.jpg", alt="Image")
              .media-body.clearfix
                small.pull-right 2h
                strong.media-heading.text-primary 
                  .point.point-success.point-lg.text-left
                  | Sheila Carter
                p.mb-sm: small Cras sit amet nibh libero, in gravida nulla. Nulla...
          // END list group item
          // START list group item
          a.list-group-item(href='#')
            .media
              .pull-left
                img.media-object.img-rounded(style='width: 48px; height: 48px;', src="app/img/user/04.jpg", alt="Image")
              .media-body.clearfix
                small.pull-right 3h
                strong.media-heading.text-primary 
                  .point.point-success.point-lg.text-left
                  | Rich Reynolds
                p.mb-sm: small Cras sit amet nibh libero, in gravida nulla. Nulla...
          // END list group item
          // START list group item
          a.list-group-item(href='#')
            .media
              .pull-left
                img.media-object.img-rounded(style='width: 48px; height: 48px;', src="app/img/user/03.jpg", alt="Image")
              .media-body.clearfix
                small.pull-right 4h
                strong.media-heading.text-primary 
                  .point.point-danger.point-lg.text-left
                  | Beverley Pierce
                p.mb-sm: small Cras sit amet nibh libero, in gravida nulla. Nulla...
          // END list group item
          // START list group item
          a.list-group-item(href='#')
            .media
              .pull-left
                img.media-object.img-rounded(style='width: 48px; height: 48px;', src="app/img/user/06.jpg", alt="Image")
              .media-body.clearfix
                small.pull-right 4h
                strong.media-heading.text-primary 
                  .point.point-danger.point-lg.text-left
                  | Alex Somar
                p.mb-sm: small Vestibulum pretium aliquam scelerisque. 
          // END list group item
        // END list group
        // START panel footer
        .panel-footer.clearfix
          a(href='#').pull-left
            small Read All
          a(href='#').pull-right
            small Dismiss All
        // END panel-footer
      // END messages

      // START activity
      .panel.panel-default
        .panel-heading
          .panel-title Activity feed
        // START list group
        .list-group
          // START list group item
          .list-group-item
            .media
              .pull-left
                span.fa-stack.fa-lg
                  em.fa.fa-circle.fa-stack-2x.text-green
                  em.fa.fa-cloud-upload.fa-stack-1x.fa-inverse.text-white
              .media-body.clearfix
                .media-heading.text-green.m0 NEW UPLOAD
                p.m0: small
                  | New file 
                  a(href="#") entities.xls 
                  | uploaded to the cloud
                small 5 minutes ago
          // END list group item

          // START list group item
          .list-group-item
            .media
              .pull-left
                span.fa-stack.fa-lg
                  em.fa.fa-circle.fa-stack-2x.text-info
                  em.fa.fa-file-text-o.fa-stack-1x.fa-inverse.text-white
              .media-body.clearfix
                .media-heading.text-info.m0 NEW DOCUMENT
                p.m0: small
                  | New document 
                  a(href="#") Lorem ipsum 
                  | created
                small 1 hour ago
          // END list group item

          // START list group item
          .list-group-item
            .media
              .pull-left
                span.fa-stack.fa-lg
                  em.fa.fa-circle.fa-stack-2x.text-danger
                  em.fa.fa-exclamation.fa-stack-1x.fa-inverse.text-white
              .media-body.clearfix
                .media-heading.text-danger.m0 IMPORTANT MESSAGE
                p.m0: small
                  | Sammy Sam sent you an important messsage. 
                  a(href="#") Read now
                small 3 hours ago
          // END list group item

          // START list group item
          .list-group-item
            .media
              .pull-left
                span.fa-stack.fa-lg
                  em.fa.fa-circle.fa-stack-2x.text-warning
                  em.fa.fa-clock-o.fa-stack-1x.fa-inverse.text-white
              .media-body.clearfix
                .media-heading.text-warning.m0 MEETING
                p.m0: small
                  | Rich Reynods added a new meeting. 
                  a(href="#").label.label-info JOIN
                small yesterday
          // END list group item

        // END list group
        // START panel footer
        .panel-footer.clearfix
          a(href='#').pull-left
            small Load more
        // END panel-footer
    // END dashboard sidebar
